<style>
    .avatar-add {
        position: relative;
        width: 373px;
        height: 373px;
        background-color: #F2F2F5;
    }

    .avatar-add p {
        position: absolute;
        top: 70px;
        width: 100%;
        margin-top: 10px;
        font-size: 12px;
        text-align: center;
        color: #999;
    }

    .avatar-add img {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 168px;
        height: 168px;
        margin: -50px 0 0 -84px;
        border-radius: 100%;
    }

    .avatar-add .upload-img {
        position: absolute;
        left: 50%;
        top: 35px;
        margin: 0 0 0 -56px;
    }

    #cover_avatar_add {
        width: 100% !important;
    }

    #cover_avatar_add p,
    #cover_avatar_add button {
        z-index: 1;
    }

    .avatar-add #bg_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        margin: 0;
        border-radius: 0;
    }
</style>

<main class="lyear-layout-content">

    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb" style="padding: 1.25rem 1rem;background-color: white;">
                        <li class="breadcrumb-item"><a href="{:url('admin/user/index')}"
                                style="color: #33cabb;">用户列表</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">修改用户</li>
                    </ol>
                </nav>
                <!-- </div> -->
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="card-body">

                            <ul class="nav nav-tabs nav-fill">
                                <li class="nav-item ">
                                    <a class="nav-link active" data-toggle="tab" href="#password"
                                        aria-selected="false">重置密码</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#avatars" aria-selected="false">头像</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#backgrounds"
                                        aria-selected="false">背景</a>
                                </li>
                            </ul>
                            <div class="tab-content">

                                <div class="tab-pane fade active show" id="password" role="tabpanel">
                                    <form action="" method="post">
                                        <input type="hidden" name="id" value="{$user.id}">
                                        <input type="hidden" name="action" value="repass">

                                        <div class="form-group col-lg-2">
                                            <label for="newpass">新密码</label>
                                            <input type="text" class="form-control" id="newpass" name="newpass"
                                                placeholder="请输入新密码">
                                        </div>
                                        <div class="form-group col-lg-2">
                                            <label for="repass">确认新密码</label>
                                            <input type="text" class="form-control" id="repass" name="repass"
                                                placeholder="请再次输入新密码">
                                        </div>


                                        <div class="form-group col-lg-4 row">
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                                <label for="vercode">验证码</label>
                                                <input type="text" class="form-control" name="vercode" id="vercode"
                                                    placeholder="请输入验证码">
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"
                                                style="position: relative;">
                                                <img id="vercode" src="/home/index/vercode.html" alt="captcha"
                                                    onclick="this.src = `/home/index/vercode.html`" style="position: 
                                                        absolute;bottom: 0;">
                                            </div>

                                        </div>

                                        <div class="form-group col-lg-12">
                                            <button type="submit" class="btn btn-primary">修改</button>
                                        </div>
                                    </form>
                                </div>

                                <div class="tab-pane fade" id="avatars" role="tabpanel">
                                    <form action="" method="post" enctype="multipart/form-data">
                                        <input type="hidden" name="id" value="{$user.id}">
                                        <input type="hidden" name="action" value="avatar">

                                        <div class="form-group col-lg-12">
                                            <div class="avatar-add">
                                                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                                                <button type="button" class="btn btn-primary upload-img"
                                                    onclick="avatar.click()">
                                                    <i class="mdi mdi-cloud-upload-outline"></i>上传头像
                                                </button>
                                                <input type="file" id="avatar" name="avatar" hidden="">
                                                <img src="{$user.avatar ? $user.avatar : '/static/home/res/images/avatar/default.png'}"
                                                    id="img">
                                                <span class="loading"></span>
                                            </div>
                                        </div>
                                        <div class="form-group col-lg-12">
                                            <button type="submit" class="btn btn-primary">上传</button>
                                        </div>
                                    </form>
                                </div>

                                <div class="tab-pane fade" id="backgrounds" role="tabpanel">
                                    <form action="" method="post" enctype="multipart/form-data">
                                        <input type="hidden" name="id" value="{$user.id}">
                                        <input type="hidden" name="action" value="cover">

                                        <div class="form-group col-lg-12">
                                            <div class="avatar-add" id="cover_avatar_add">
                                                <p>建议尺寸1920*1080，支持jpg、png</p>
                                                <button type="button" class="btn btn-primary upload-img"
                                                    onclick="cover.click()">
                                                    <i class="mdi mdi-cloud-upload-outline"></i>上传背景图
                                                </button>
                                                <input type="file" id="cover" name="cover" hidden="">
                                                <img src="{$user.cover ? $user.cover : '/static/home/res/images/bg.png'}"
                                                    id="bg_img">
                                                <span class="loading"></span>
                                            </div>
                                        </div>
                                        <div class="form-group col-lg-12">
                                            <button type="submit" class="btn btn-primary">上传</button>
                                        </div>
                                    </form>
                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>

</main>

<script>
    // 图片预览函数
    function GetObjectURL(file) {
        // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
        var url = null;

        //判断是否为IE浏览器还是google还是其他浏览器
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }

        return url
    }

    $("#avatar").change(function (e) {
        let file = $(this)[0].files[0] ? $(this)[0].files[0] : {};
        // console.log(file);
        let url = GetObjectURL(file);

        $("#img").attr("src", url);
    });

    $("#cover").change(function (e) {
        let file = $(this)[0].files[0] ? $(this)[0].files[0] : {};
        // console.log(file);
        let url = GetObjectURL(file);

        $("#bg_img").attr("src", url);
    });
</script>